<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<div th:replace="include :: header('首页')"></div>
<style>
    .panel_word{
        height:100px;
    }
</style>
<body>
<div class="layui-container">
    <blockquote class="layui-elem-quote">
        <h2>零点后台管理框架</h2>
        <p>
            <b>当前版本：</b><span>v[[${version}]]</span>
        </p>
    </blockquote>
    <div style="padding: 15px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="panel_word">
                            卡片1<br>
                            <span>为我点赞</span>
                            <cite>点赞地址链接</cite>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="panel_word">
                            卡片2<br>
                            <span>为我点赞</span>
                            <cite>点赞地址链接</cite>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="panel_word">
                            卡片3<br>
                            <span>为我点赞</span>
                            <cite>点赞地址链接</cite>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="panel_word">
                            卡片4<br>
                            <span>为我点赞</span>
                            <cite>点赞地址链接</cite>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="pieChart" style="width: 300px;height:300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="lineChart" style="width: 700px;height:300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="layui-bg-orange">

    <div class="layui-row">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12">
            <blockquote class="layui-elem-quote title">行表格</blockquote>
            <table class="layui-table magt0" lay-skin="line">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>人物</th>
                    <th>民族</th>
                    <th>出场时间</th>
                    <th>格言</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>贤心</td>
                    <td>汉族</td>
                    <td>1989-10-14</td>
                    <td>人生似修行</td>
                </tr>
                <tr>
                    <td>张爱玲</td>
                    <td>汉族</td>
                    <td>1920-09-30</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                <tr>
                    <td>Helen Keller</td>
                    <td>拉丁美裔</td>
                    <td>1880-06-27</td>
                    <td> Life is either a daring adventure or nothing.</td>
                </tr>
                <tr>
                    <td>岳飞</td>
                    <td>汉族</td>
                    <td>1103-北宋崇宁二年</td>
                    <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                </tr>
                <tr>
                    <td>孟子</td>
                    <td>华夏族（汉族）</td>
                    <td>公元前-372年</td>
                    <td>猿强，则国强。国强，则猿更强！</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div th:replace="include :: footer-js"></div>
<div th:replace="include :: echarts-js"></div>
<script type="text/javascript">
    var $, layer;
    layui.use(['layer', 'jquery'], function () {
        $ = layui.jquery;
        layer = parent.layer === undefined ? layui.layer : top.layer;


        var pieChartOption = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 基于准备好的dom，初始化echarts实例
        var pieChart = echarts.init(document.getElementById('pieChart'));
        // 使用刚指定的配置项和数据显示图表。
        pieChart.setOption(pieChartOption);

        // 基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('lineChart'));

        // 指定图表的配置项和数据
        var lineChartOption = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(lineChartOption);


    });

</script>
</body>
</html>
